<template>
  <div class="my-container">
    <div class="top-box">
      <div class="user">
        <div class="name">
          <span>{{ userInfo.nickname }}</span>
          <span>{{ userInfo.intro }}</span>
        </div>
        <img v-imgerror="userImg" @click="$router.push('/info')" :src="'http://hmmm.zllhyy.cn/' + userInfo.avatar" alt=""/>
      </div>
      <div class="data">
        <div class="item">
          <span class="num">{{ userInfo.submitNum }}</span>
          <span>累计答题</span>
        </div>
        <div class="item">
          <span class="num">0</span>
          <span>收藏题目</span>
        </div>
        <div class="item">
          <span class="num">{{ userInfo.errorNum }}</span>
          <span>我的错题</span>
        </div>
        <div class="item">
          <span class="num">{{ (userInfo.submitNum - userInfo.errorNum) / userInfo.submitNum * 100 }}%</span>
          <span>正确率</span>
        </div>
      </div>
    </div>
    <div class="main-box">
      <van-cell @click="$router.push('/editInfo?type=position')" class="myjob" icon="idcard" title="我的岗位" is-link :value="userInfo.position" />   

      <div class="experience">
        <div class="experience-info">
          <span>面经数据</span>
        </div>
        <div class="experience-data">
          <div class="item">
            <span class="item-top">昨日阅读+{{ userInfo.shareData.read.yesterday }}</span>
            <span class="item-center">{{ userInfo.shareData.read.total }}</span>
            <span class="item-bottom">阅读总数</span>
          </div>
          <div class="item">
            <span class="item-top">昨日获赞+{{ userInfo.shareData.star.yesterday }}</span>
            <span class="item-center">{{ userInfo.shareData.star.total }}</span>
            <span class="item-bottom">获赞总数</span>
          </div>
          <div class="item">
            <span class="item-top">昨日新增+{{ userInfo.shareData.comment.yesterday }}</span>
            <span class="item-center">{{ userInfo.shareData.comment.total }}</span>
            <span class="item-bottom">评论总数</span>
          </div>
        </div>
      </div>

      <div class="main-bottom">
        <van-cell style="height: 55px" icon="comment-o" title="我的面经分享" is-link value="20" />
        <van-cell style="height: 55px" icon="eye-o" title="我的消息" is-link value="30" />
        <van-cell style="height: 55px" icon="balance-pay" title="收藏的题库" is-link value="40" />
        <van-cell style="height: 55px" icon="balance-pay" title="收藏的企业" is-link value="21" />
        <van-cell style="height: 55px" icon="failure" title="我的错题" is-link value="123" />     
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'my-container',
  data() {
    return {
      userImg: 'http://hmmm.zllhyy.cn/uploads/myphoto_f6d77c1cd8.png'
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  }
}
</script>

<style lang="less" scoped>
.top-box {
  background-color: #c80030;
  height: 220px;
  .user {
    display: flex;
    padding: 30px 30px 30px 15px;
    justify-content: space-between;
    span {
      color: #fff;
      display: block;
      &:nth-child(1) {
        font-size: 20px;
        font-weight: 700;
      }
      &:nth-child(2) {
        font-size: 13px;
        color: #ecb2c0;
      }
    }
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 4px solid #c7697e;
    }
  }
  .data {
    color: #fff;
    display: flex;
    justify-content: space-evenly;
    .item {
      display: flex;
      flex-direction: column;
      text-align: center;
      font-size: 13px;
      color: #ecb2c0;
      .num {
        font-weight: 700;
        font-size: 20px;
        padding-bottom: 5px;
        color: #fff;
      }
    }
  }
}
.main-box {
  height: 75vh;
  position: relative; 
  .myjob {
    width: 345px;
    height: 55px;
    position: absolute;
    top: -40px;
    left: 15px;
    border-radius: 10px;
    border-bottom: 1px solid #f8f8fa;
  }
  .experience {
    .experience-info {
      padding: 35px 0 15px 25px;
      font-size: 14px;
      font-weight: 700;
    }
    .experience-data {
      margin: 0 45px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        .item-top {
          font-size: 12px;
          color: #b4b4bd;
          padding-bottom: 8px;
        }
        .item-center {
          font-size: 22px;
          font-weight: 700;
          padding-bottom: 5px;
        }
        .item-bottom {
          font-size: 12px;
        }
      }
    }
  }
  .main-bottom {
    padding: 0 15px;
    margin-top: 35px;
  }
}
</style>
